<template>
    <page-view class="flex flex-col address-list-page">
        <title-bar :show-back="true">我的收货地址</title-bar>
        <div class="flex-1 overflow-auto">
            <my-loading :isLoading="isLoading">
                <AddressList :list="list" @edit="editCurrentAddress">
                    <template #tag="item">
                        <Tag type="primary">{{ item.tag }}</Tag>
                    </template>
                    <template #item-bottom="item">
                        <div class="flex flex-row justify-end">
                            <Button @click="delCurrentAddress(item.id)" type="danger" size="mini" round
                                plain>删除</Button>
                        </div>
                    </template>
                </AddressList>
            </my-loading>
        </div>
        <div class="box-border px-4 py-2">
            <Button @click="$router.push({ name: 'AddAddressInfo' })" type="primary" block round plain
                size="small">新增地址</Button>
        </div>
    </page-view>
</template>
<script>
import API from "@/utils/API";
import { Button, AddressList, Tag, Dialog, Toast } from "vant";
export default {
    name: "AddressInfoList",
    data() {
        return {
            list: [],
            isLoading: false,
        }
    },
    created() {
        this.getMyAddressInfoList();
    },
    methods: {
        async getMyAddressInfoList() {
            this.isLoading = true;
            let result = await API.addressInfo.getMyAddressInfoList();
            let list = result.map(item => {
                return {
                    id: item.id,
                    name: item.person_name,
                    tel: item.phone,
                    address: item.address,
                    tag: item.tag
                }
            })
            this.list = list;
            this.isLoading = false;
        },
        delCurrentAddress(id) {
            Dialog.confirm({
                title: "提示",
                message: "确定要删除吗"
            }).then(async () => {
                // console.log(id);
                await API.addressInfo.deleteById(id);

                // 删除当前地址
                let index = this.list.findIndex(item => item.id === id);
                if (index != -1) {
                    this.list.splice(index, 1);
                }
                Toast.success("删除成功");
            }).catch(() => { })
        },
        // 编辑地址
        editCurrentAddress(item, index) {
            // console.log(item);
            this.$router.push({
                name: "EditAddress",
                params: {
                    id: item.id
                }
            })
        }
    },
    components: {
        Button, AddressList, Tag
    }
}
</script>
<style scoped lang="scss">
.address-list-page {

    // 样式穿透 
    :deep(.van-address-list__bottom) {
        display: none;
    }
}
</style>